<!DOCTYPE html>
<html lang="zxx">

<head>
    
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title></title>

    <!-- Fav Icons -->
    <link rel="shortcut icon" href="assets/img/favicon.png" type="image/x-icon">

    <!-- Stylesheets -->
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/responsive.css">


</head>

<body>
    <div class="page-wrapper">

        <!-- Preloader -->
        <div class="preloader"></div>



        <!--==================================================================== 
                                Start Header area
        =====================================================================-->
        <header class="main-header">
            <div class="container">
                <div class="header-inner">
                    <div class="logo">
                        <a href="index.html"><img src="assets/img/logo.png" alt="Main Logo"></a>
                    </div>
                    
                    <div class="categories">
                        <button><i class="flaticon-list"></i>
                        <span>Categories</span></button>
                        <ul>
                            <li><a href="shop.html"><i class="flaticon-apple"></i> Fruits and Vegetables</a></li>
                            <li><a href="shop.html"><i class="flaticon-chicken-hand-drawn-outline"></i> Meat and Fish</a></li>
                            <li><a href="shop.html"><i class="flaticon-pressure-washer"></i> Home and Cleaning</a></li>
                            <li><a href="shop.html"><i class="flaticon-pest"></i> Pest Control</a></li>
                            <li><a href="shop.html"><i class="flaticon-stationery"></i> Office Products</a></li>
                            <li><a href="shop.html"><i class="flaticon-make-up"></i> Beauty Products</a></li>
                            <li><a href="shop.html"><i class="flaticon-first-aid-kit"></i> Health Products</a></li>
                            <li><a href="shop.html"><i class="flaticon-track"></i> Pet Care</a></li>
                            <li><a href="shop.html"><i class="flaticon-sketch"></i> Home Appliances</a></li>
                            <li><a href="shop.html"><i class="flaticon-baby-boy"></i> Baby Care</a></li>
                        </ul>
                    </div>
                    
                    <form action="#" class="menu-search">
                        <select name="select-category">
                            <option value="option-1">All Categories</option>
                            <option value="option-2">Fruits and Vegetables</option>
                            <option value="option-3">Meat and Fish</option>
                            <option value="option-4">Home and Cleaning</option>
                            <option value="option-5">Pest Control</option>
                            <option value="option-6">Office Products</option>
                            <option value="option-7">Beauty Products</option>
                            <option value="option-8">Health Products</option>
                            <option value="option-9">Pet Care</option>
                            <option value="option-10">Home Appliances</option>
                            <option value="option-11">Baby Care</option>
                        </select>
                        <input type="search" placeholder="Search" required>
                        <button type="submit">Search</button>
                    </form>
                    
                    <div class="menu-collections">
                        <div class="collection-item watch">
                            <i class="flaticon-heart"></i>
                            <div class="collection-inner">
                                <div class="alert single-collection">
                                    <button data-dismiss="alert"><i class="flaticon-delete-button"></i></button>
                                    <div class="collection-image">
                                        <img src="assets/img/shop/cart-1.png" alt="">
                                    </div>
                                    <div class="collection-content">
                                        <p>Danish Full Cream Milk</p>
                                        <h6>$120.00</h6>
                                    </div>
                                </div>
                                <div class="alert single-collection">
                                    <button data-dismiss="alert"><i class="flaticon-delete-button"></i></button>
                                    <div class="collection-image">
                                        <img src="assets/img/shop/cart-2.png" alt="">
                                    </div>
                                    <div class="collection-content">
                                        <p>Healthy Yellow Papaya</p>
                                        <h6>$120.00</h6>
                                    </div>
                                </div>
                                <div class="collection-btn">
                                    <a href="cart.html" class="theme-btn bg-blue no-shadow mx-auto">Add to Cart</a>
                                </div>
                            </div>
                        </div>
                        <div class="collection-item cart">
                            <i class="flaticon-shopping-cart"></i>
                            <div class="collection-inner">
                                <div class="alert single-collection">
                                    <button data-dismiss="alert"><i class="flaticon-delete-button"></i></button>
                                    <div class="collection-image">
                                        <img src="assets/img/shop/cart-1.png" alt="">
                                    </div>
                                    <div class="collection-content">
                                        <p>Danish Full Cream Milk</p>
                                        <h6>$120.00</h6>
                                    </div>
                                </div>
                                <div class="alert single-collection">
                                    <button data-dismiss="alert"><i class="flaticon-delete-button"></i></button>
                                    <div class="collection-image">
                                        <img src="assets/img/shop/cart-2.png" alt="">
                                    </div>
                                    <div class="collection-content">
                                        <p>Healthy Yellow Papaya</p>
                                        <h6>$120.00</h6>
                                    </div>
                                </div>
                                <div class="collection-btn">
                                    <a href="cart.html" class="theme-btn bg-blue no-shadow mr-10">View Cart</a>
                                    <a href="checkout.html" class="theme-btn ml-auto no-shadow">Checkout</a>
                                </div>
                            </div>
                        </div>
                        <div class="collection-item profile">
                            <i class="flaticon-user-1"></i>
                            <div class="collection-inner">
                                <ul>
                                    <li><a href="cart.html">Cart</a></li>
                                    <li><a href="checkout.html">Checkout</a></li>
                                    <li><a href="sign-in.html">Login</a></li>
                                    <li><a href="sign-up.html">Sign Up</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    
                    <div class="main-menu">
                        <button><i class="flaticon-list-menu"></i></button>
                        <ul>
                            <li><a href="index.html">Home</a></li>
                            <li class="dropdown"><a href="#">Blog</a>
                                <ul>
                                    <li><a href="blog.html">All Blog</a></li>
                                    <li><a href="blog-details.html">Blog Details</a></li>
                                </ul>
                            </li>
                            <li class="dropdown"><a href="#">Shop</a>
                                <ul>
                                    <li><a href="shop.html">Shop Page</a></li>
                                    <li><a href="shop-details.html">Shop Details</a></li>
                                    <li><a href="cart.html">Cart Page</a></li>
                                    <li><a href="checkout.html">Checkout</a></li>
                                </ul>
                            </li>
                            <li class="dropdown"><a href="#">Pages</a>
                                <ul>
                                    <li><a href="sign-in.html">Sign In</a></li>
                                    <li><a href="sign-up.html">Sign Up</a></li>
                                </ul>
                            </li>
                            <li><a href="contact.html">Contact</a></li>
                        </ul>
                        <div class="menu-overlay"></div>
                    </div>
                </div>
            </div>
            <div class="collection-close"></div>
        </header>
        <!--==================================================================== 
                                End Header area
        =====================================================================-->



        <!--==================================================================== 
            Start Banner Section
        =====================================================================-->
        <section class="banner-section" style="background-image:url(assets/img/banner.jpg);">
            <div class="container">
                <div class="banner-inner text-center">
                    <h2 class="page-title">Checkout</h2>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Checkout</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </section>
        <!--==================================================================== 
            End Banner Section
        =====================================================================-->


        <!--==================================================================== 
           Start Checkout Page
       =====================================================================-->
        <section class="checkout-page mt-120 rmt-80 mb-120 rmb-80">
            <div class="container">
                <div class="row col-gap-60">
                    <div class="col-xl-8 col-lg-6">
                        <div class="checkout-form-wrap rmb-50">
                           
                           <div class="cart-title">
                                <h4>Billing Details</h4>
                            </div>
                            
                            <!-- Form Area Start -->
                            <form id="checkout-form" name="checkout-form" class="checkout-form" action="sendmail.php" method="POST">
                                <div class="row col-gap-50 clearfix">
                                    <div class="col-md-6">        
                                        <div class="form-group">
                                            <label for="f-name">First Name*</label>
                                            <input type="text" class="form-control" id="f-name" placeholder="Jhon" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">        
                                        <div class="form-group">
                                            <label for="l-name">Lastst Name*</label>
                                            <input type="text" class="form-control" id="l-name" placeholder="Mack" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="country">Country*</label>
                                            <select class="form-control" id="country" name="select1">
                                                <option value="value1">Select Country</option>
                                                <option value="value2">United States</option>
                                                <option value="value3">United Kingdom</option>
                                                <option value="value4">Qatar</option>
                                                <option value="value5">Russia</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="city">Town / City*</label>
                                            <select class="form-control" id="city" name="select1">
                                                <option value="value1">Select Option</option>
                                                <option value="value2">Kushtia</option>
                                                <option value="value3">Khulna</option>
                                                <option value="value4">Dhaka</option>
                                                <option value="value5">Borisal</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="district">District*</label>
                                            <select class="form-control" id="district" name="select1">
                                                <option value="value1">Select District</option>
                                                <option value="value2">Dhaka</option>
                                                <option value="value3">Khulna</option>
                                                <option value="value4">Barisal</option>
                                                <option value="value5">Rsjshahi</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-6">        
                                        <div class="form-group">
                                            <label for="post-code">Postal Code*</label>
                                            <input type="text" class="form-control" id="post-code" placeholder="Enter Post Code" required>
                                        </div>
                                    </div>

                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="street-address">Street Address*</label>
                                            <input type="text" class="form-control" id="street-address" placeholder="Enter Your Delivery Address" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="phone-number">Phone Number*</label>
                                            <input type="text" class="form-control" id="phone-number" placeholder="+01 000...">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="email">Email <span>(optional)</span></label>
                                            <input type="email" class="form-control" id="email" placeholder="eg: yourmail@gmail.com" required>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="email">Other Note <span>(optional)</span></label>
                                            <textarea class="form-control mb-0" placeholder="+01 000..." rows="8" required></textarea>
                                        </div>
                                    </div>                                                
                                </div>
                            </form>
                            <!-- Form Area End -->
                        </div>
                    </div>
                    <div class="col-xl-4 col-lg-6">
                        <div class="checkout-cart-total clearfix">
                           <div class="cart-title">
                                <h4>Order Summary</h4>
                            </div>
                            
                            <div class="total-item-wrap clearfix">
                                <div class="total-item">
                                    <span class="title">Organic Cauliflower (1kg)</span>
                                    <span class="price">240</span>
                                </div>
                                <div class="total-item">
                                    <span class="title">Organic Yellow Papaya (1ps)</span>
                                    <span class="price">240</span>
                                </div>
                                <div class="total-item">
                                    <span class="title">Organic Granny Apple (4ps)</span>
                                    <span class="price">240</span>
                                </div>
                                <div class="total-item">
                                    <span class="title">Shipping Cost</span>
                                    <span class="price">10</span>
                                </div>
                                <div class="total-item discount">
                                    <span class="title">Discount</span>
                                    <span class="price">0</span>
                                </div>
                                <div class="total-item total">
                                    <span class="title">Total</span>
                                    <span class="price">730</span>
                                </div>
                            </div>
                            
                            <div class="cart-title">
                                <h4 class="mb-25 mt-10">Payment</h4>
                            </div>
                            <ul id="accordionExample" class="mb-40">
                                
                                
                                <!-- Default unchecked -->
                                <li class="custom-control custom-radio">
                                    <input type="radio" class="custom-control-input" id="methodone" name="defaultExampleRadios" checked>
                                    <label class="custom-control-label" for="methodone" data-toggle="collapse" data-target="#collapseOne" aria-controls="collapseOne">Direct Bank Transfer</label>

                                    <div id="collapseOne" class="collapse show" data-parent="#accordionExample" style="">
                                        <p>Lorem ipsum dolor sit amet, con se ctetur adipiscing elit. In sagittis eg esta ante, sed viverra nunc tinci dunt nec elei fend et tiram.</p>
                                    </div>
                                </li>

                                <!-- Default unchecked -->
                                <li class="custom-control custom-radio">
                                    <input type="radio" class="custom-control-input" id="methodtwo" name="defaultExampleRadios">
                                    <label class="custom-control-label collapsed" for="methodtwo" data-toggle="collapse" data-target="#collapseTwo" aria-controls="collapseTwo">Credit Card / Master Card</label>

                                    <div id="collapseTwo" class="collapse" data-parent="#accordionExample" style="">
                                        <ul>
                                            <li><a href="#"><img src="assets/img/pay-method/visa.png" alt=""></a></li>
                                            <li><a href="#"><img src="assets/img/pay-method/mastercard.png" alt=""></a></li>
                                            <li><a href="#"><img src="assets/img/pay-method/discover.png" alt=""></a></li>
                                            <li><a href="#"><img src="assets/img/pay-method/americanexpress.png" alt=""></a></li>
                                        </ul>
                                    </div>
                                </li>

                                <!-- Default unchecked -->
                                <li class="custom-control custom-radio">
                                    <input type="radio" class="custom-control-input" id="methodthree" name="defaultExampleRadios">
                                    <label class="custom-control-label collapsed" for="methodthree" data-toggle="collapse" data-target="#collapsethree" aria-controls="collapsethree">Cash On Delivery</label>

                                    <div id="collapsethree" class="collapse" data-parent="#accordionExample" style="">
                                        <p>Lorem ipsum dolor sit amet, con se ctetur adipiscing elit. In sagittis eg esta ante, sed viverra nunc tinci dunt nec elei fend et tiram.</p>
                                    </div>

                                </li>
                            </ul>
                            
                            <div class="checkout-btn text-center">
                                <button class="theme-btn br-5 w-100">Place Order</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--==================================================================== 
           End Checkout Page
       =====================================================================-->



        <!--==================================================================== 
                            Start footer section
        =====================================================================-->
        <footer class="footer bg-black pt-100 text-lg-left text-center">
            <div class="container">
                <div class="row">

                    <!--Footer Column-->
                    <div class="col-lg-3 col-md-12 mb-30">
                        <div class="footer-widget logo-widget mr-20">
                            <div class="footer-logo">
                                <a href="index.html"><img src="assets/img/logo-footer.png" alt="footer logo"></a>
                            </div>
                            <p>Praesent dapi cursus faucibus, tortor neque egestas auguae, eu vulputate magna eros erat. Aliquam erat volutpat.</p>
                            <div class="footer-social-icon">
                                <ul class="social-style-one">
                                    <li><a href="#"><i class="fa fa-facebook-f"></i></a></li>
                                    <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                    <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                                    <li><a href="#"><i class="fa fa-instagram"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!--Footer Column-->
                    <div class="col-lg-2 col-md-3 mb-30">
                        <div class="footer-widget links-widget float-lg-right mr-40">
                            <h5 class="footer-title mb-30">Company</h5>
                            <ul class="list">
                                <li><a href="#">ABOUT US</a></li>
                                <li><a href="#">BLOG</a></li>
                                <li><a href="#">SHOP</a></li>
                                <li><a href="#">CONTACT</a></li>
                            </ul>
                        </div>
                    </div>

                    <!--Footer Column-->
                    <div class="col-lg-4 col-md-5 mb-30">
                        <div class="footer-widget form-widget ml-115 mr-30">
                            <h5 class="footer-title mb-30">Subscribe Our News Letter</h5>
                            <p>Praesent dapi cursus faucibus, tortor neque egestas auguae, eu vulputate magna eros</p>
                            <form class="subscribe">
                                <input type="email" placeholder="Your Email For Notify" required>
                                <button type="submit">Send</button>
                            </form>
                        </div>
                    </div>

                    <!--Footer Column-->
                    <div class="col-lg-3 col-md-4 mb-30">
                        <div class="footer-widget pament-widget">
                            <h5 class="footer-title mb-30">Payment</h5>
                            <ul class="list">
                                <li><a href="#"><img src="assets/img/pay-method/visa.png" alt=""></a></li>
                                <li><a href="#"><img src="assets/img/pay-method/mastercard.png" alt=""></a></li>
                                <li><a href="#"><img src="assets/img/pay-method/discover.png" alt=""></a></li>
                                <li><a href="#"><img src="assets/img/pay-method/americanexpress.png" alt=""></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">

                        <!-- Copyright Area-->
                        <div class="copyright text-center pl-10 pr-10 pt-30 pb-10 mt-55 rmt-35 mb-65">
                            <p>Copyright &copy; 2020.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
                        </div>
                        
                    </div>
                </div>

            </div>
        </footer>
        <!--==================================================================== 
                                End footer section
        =====================================================================-->



    </div>
    <!--End pagewrapper-->


    <!-- Scroll Top Button -->
    <button class="scroll-top scroll-to-target" data-target="html"><span class="fa fa-angle-up"></span></button>


    <!-- jequery plugins -->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/bootstrap-v4.1.3.min.js"></script>
    <script src="assets/js/jquery.nice-select.min.js"></script>
    <script src="assets/js/jquery.simpleLoadMore.min.js"></script>
    <script src="assets/js/slick.min.js"></script>
    <script src="assets/js/appear.js"></script>

    <!-- Custom script -->
    <script src="assets/js/script.js"></script>

</body>

</html>
